<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="addChildTop">
            <a href="javascript:;"><img src="/static/img/Shape.png" @click='back' /></a>
            添加子管理员
        </div>
        <div class="addChildBot">
            <div class="member">
                成员：<input type="text" placeholder='请选择成员' v-model="selectMembersVal" @focus='selectMembers'>
            </div>
            <div class="chainCommand">
                管理范围：
                <div class="branch radioGroups">
                    <div class="branchDiv" v-for="(item,index) in fanweiLists" @click="fanweiListsClick(index)">
                        <div>
                            <div v-show="selDivIndex == index"></div>
                        </div>
                        <div>
                            {{item.name}}
                        </div>
                    </div>
                    <div class="branchspecMem">
                        <input type="text" v-model="specMemVal" name="" id="Specific" placeholder='请选择特定企业部门' @focus='selectSpecific' v-show='specMem'>
                    </div>
                </div>
            </div>
            <div class="privileges">
                分配权限：
                <span id="bracket">
        			(将会在以上通讯录范围内配置权限)
        		</span>
                <span id="allJurisdiction">
        		   <el-checkbox v-model="legalVal" @change="jurisdiction"></el-checkbox>&nbsp;&nbsp;全部权限
        		</span>
            </div>
            <div class="BasicPermissions">
                <ul>
                    <li id='first'>基础权限</li>
                    <li v-for="(item,index) in shangLists" class="BasicPermissionsLi">
                        <div class="ato">
                            <img :src="'../../../static/img/' + item.authName + '.png'" />&nbsp;&nbsp;{{item.authName}}
                        </div>
                        <div class="allAA" @click="shangListsCLick(index)">
                            <div>
                                <img v-show="item.open" src="/static/img/选中.png" alt="">
                            </div>
                            <div>
                                全部管理权限
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="BasicPermissions">
                <ul>
                    <li id='first'>微应用权限</li>
                    <li v-for="(item,index) in xiaLists" class="BasicPermissionsLi">
                        <div class="ato">
                            <img :src="'../../../static/img/' + item.authName + '.png'" />&nbsp;&nbsp;{{item.authName}}
                        </div>
                        <div class="allAA" @click="allAACLick(index)">
                            <div>
                                <img v-show="item.open" src="/static/img/选中.png" alt="">
                            </div>
                            <div>
                                全部管理权限
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="save">
                <a href="javascript:;" @click="addClick">保存</a>
            </div>
        </div>
        <div v-show='ModalsShow' class="ModalsmemBox">
            <div class="Modalsmem">
                <div class="ModalsmemTop">
                    选择成员
                </div>
                <div class="ModalsmemCenter">
                    <div class="centerLeft">
                        <div class="centerLeftTop">
                            选择人员
                        </div>
                        <div class="centerLeftBot">
                            <div class="centerLeftBotOne">
                                <div>
                                    <div class="centerLeftBotOneL">
                                        <img src="/static/img/账号.png" alt="">
                                    </div>
                                    <div class="centerLeftBotOneI">
                                        <input type="text" placeholder="搜索">
                                    </div>
                                </div>
                            </div>
                            <div class="centerLeftBotTwo">
                                <ul>
                                    <li v-for="(item,index) in navLists" :key="index" @click="navClick(index)">
                                        <div v-show="index !== 0">
                                            >
                                        </div>
                                        <div>
                                            {{item.name}}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="centerLeftBotThr">
                                <div>
                                    <el-checkbox v-model="checked" @change="numChange"></el-checkbox>
                                </div>
                                <div>
                                    <span>全选</span>
                                </div>
                            </div>
                            <div class="centerLeftBotFour">
                                <ul>
                                    <li v-for="(item,index) in selectLeftlists" :key="index">
                                        <div class="centerLeftBotFourLiL" @click="lefthandleCheckedCitiesChange(index)">
                                            <div>
                                                <img v-show="item.open" src="/static/img/选中.png" alt="">
                                            </div>
                                            <div>
                                                {{item.name}}
                                            </div>
                                        </div>
                                        <div class="centerLeftBotFourLiR" @click="leftNextClick(index)">
                                            <div>
                                                <img src="/static/img/账号.png" alt="">
                                            </div>
                                            <div>
                                                下级
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="centerCenter">
                        <div @click="commodityLeftClick">
                            右
                        </div>
                        <div @click="commodityRightClick">
                            左
                        </div>
                    </div>
                    <div class="centerRight">
                        <div class="centerRightTop">
                            已选人员
                        </div>
                        <div class="centerRightBot">
                            <ul>
                                <li v-for="(item,index) in selectRightlists" :key="index" @click="righthandleCheckedCitiesChange(index)">
                                    <div class="centerRightBotLiL">
                                        <div>
                                            <img v-show="item.open" src="/static/img/选中.png" alt="">
                                        </div>
                                        <div>
                                            {{item.name}}
                                        </div>
                                    </div>
                                    <div class="centerRightBotLiR">
                                        <div>
                                            <img src="/static/img/账号.png" alt="">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ModalsmemBot">
                    <div @click="confirmClick">
                        确定
                    </div>
                    <div @click="cancelClick">
                        取消
                    </div>
                </div>
            </div>
        </div>
        <div v-show="definiBox" class="definiBox">
            <div class="defini">
                <div class="definiBoxTop">
                    选择部门
                </div>
                <div class="definiBoxCenter">
                    <div>
                        <el-tree :data="reldatas" :accordion="true" ref="tree" show-checkbox node-key="id" @check-change='nodeaClick' highlight-current
                            :props="defaultProps">
                            </el-tree>
                    </div>
                </div>
                <div class="ModalsmemBot">
                    <div @click="confirmdefiniClick">
                        确定
                    </div>
                    <div @click="cancelClick">
                        取消
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex';
    import popupBox from '../pop-upBox' //这里引入全局组件
    import defini from '../defini'
    export default {
        components: { popupBox, defini },//这里注册全局组件
        name: 'set',
        data() {
            return {
                radioVal: '',
                selectMembersVal: '',
                leftcheckNull: '',
                checkNull: '',
                checked: false,
                leftcheckList: [],
                rightcheckList: [],
                ModalsShow: false,
                navLists: [
                ],
                selectLeftlists: [
                ],
                selectRightlists: [
                ],
                reldatas: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                definiBox: false,

                xiaLists: [],
                specMem: false,
                fanweiLists: [
                    { name: "全公司", num: '0' },
                    { name: "当前部门以及子部门", num: '1' },
                    { name: "特定部门", num: '2' }
                ],
                shangLists: [
                    { authName: "通讯录", id: 'auth_option_book', open: false },
                    { authName: "微应用管理", id: 'auth_option_app', open: false },
                    { authName: "企业设置", id: 'auth_option_org', open: false }
                ],
                selDivIndex: 0,
                indexArr: 0,
                legalVal: false,
                uidsVal: '',
                deptIds: [],
                specMemVal: '',
            }
        },
        created: function () {
            this.listFun()
        },
        watch: {
        },
        methods: {
            listFun() {
                var self = this
                sessionStorage.getItem('orgId')
                this.getdeptstaff({
                    oid: sessionStorage.getItem('orgId'),
                    // uid: sessionStorage.getItem('userId'),
                    deptId: ''
                }).then(data => {
                    self.navLists.push({ name: data.data.name, deptId: data.data.id })
                    this.getdeptstaff({
                        oid: sessionStorage.getItem('orgId'),
                        // uid: sessionStorage.getItem('userId'),
                        deptId: self.navLists[0].deptId
                    }).then(data => {
                        data.data.forEach(function (ele, ind) {
                            self.selectLeftlists.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                        })
                    }).catch(msg => {
                        this.$message({
                            type: "info",
                            message: "服务器没有启动!"
                        });
                    });
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
                this.getOrgTreeList({
                    oid: sessionStorage.getItem('orgId'),
                    uid: sessionStorage.getItem('userId')
                }).then(data => {
                    self.reldatas = data.data
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
                self.xiaLists = []
                this.getauthgetAllAuth({
                    orgId: sessionStorage.getItem('orgId'),
                }).then(data => {
                    data.data.forEach(function (ele, ind) {
                        self.xiaLists.push({ authName: ele.authName, open: false, authValue: ele.authValue, id: ele.id, orgId: ele.orgId })
                    })
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
            },
            // 选择微应用权限
            allAACLick(index) {
                if (!this.xiaLists[index].open) {
                    this.indexArr += 1
                } else {
                    this.indexArr -= 1
                }
                this.xiaLists[index].open = !this.xiaLists[index].open

                var xiaListsnumLength = this.xiaLists.length + this.shangLists.length
                console.log(this.indexArr, xiaListsnumLength)
                if (this.indexArr == xiaListsnumLength) {
                    this.legalVal = true
                } else {
                    this.legalVal = false
                }
            },
            // 选择基础权限
            shangListsCLick(index) {
                if (!this.shangLists[index].open) {
                    this.indexArr += 1
                } else {
                    this.indexArr -= 1
                }
                this.shangLists[index].open = !this.shangLists[index].open

                var xiaListsnumLength = this.xiaLists.length + this.shangLists.length
                if (this.indexArr == xiaListsnumLength) {
                    this.legalVal = true
                } else {
                    this.legalVal = false
                }
            },
            nodeaClick(a, b, c) {
                console.log(a, b, c)
            },
            // 选定部门
            confirmdefiniClick() {
                var self = this
                self.specMemVal = []
                this.deptIds = this.$refs.tree.getCheckedKeys()
                var confirmdefiniArr = this.$refs.tree.getCheckedNodes()
                if (confirmdefiniArr.length == 1) {
                    self.specMemVal = confirmdefiniArr[0].name
                } else {
                    confirmdefiniArr.forEach(function (ele, index) {
                        self.specMemVal += ele.name + ','
                    })
                }
                this.definiBox = false
            },
            // 导航选择
            navClick(index) {
                var self = this
                this.getdeptstaff({
                    oid: sessionStorage.getItem('orgId'),
                    // uid: sessionStorage.getItem('userId'),
                    deptId: self.navLists[index].deptId
                }).then(data => {
                    var start = index + 1
                    self.navLists.splice(start, 1)
                    self.selectLeftlists = []
                    data.data.forEach(function (ele, ind) {
                        self.selectLeftlists.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    })
                    self.selectLeftlists.forEach(function (eleLeft, eleLeftInd) {
                        self.selectRightlists.forEach(function (eleRight, rightInd) {
                            if (eleLeft.id == eleRight.id) {
                                self.selectLeftlists[eleLeftInd].open = true
                            }
                        })
                    })
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
            },
            // 下一级
            leftNextClick(index) {
                var self = this
                this.getdeptstaff({
                    oid: sessionStorage.getItem('orgId'),
                    // uid: sessionStorage.getItem('userId'),
                    deptId: self.selectLeftlists[index].id
                }).then(data => {
                    self.navLists.push({ name: self.selectLeftlists[index].name, deptId: self.selectLeftlists[index].id })
                    self.selectLeftlists = []
                    data.data.forEach(function (ele, ind) {
                        self.selectLeftlists.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    })
                    self.selectLeftlists.forEach(function (eleLeft, eleLeftInd) {
                        self.selectRightlists.forEach(function (eleRight, rightInd) {
                            if (eleLeft.id == eleRight.id) {
                                console.log(eleLeft.name)
                                self.selectLeftlists[eleLeftInd].open = true
                            }
                        })
                    })
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
            },
            // 取消选中
            righthandleCheckedCitiesChange(index) {
                var self = this
                this.selectRightlists[index].open = !this.selectRightlists[index].open
            },
            commodityRightClick() {
                var self = this
                var rights = []
                var seRight = []
                self.selectRightlists.forEach(function (ele, ind) {
                    if (ele.open == false) {
                        rights.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    } else {
                        seRight.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    }

                })
                self.selectRightlists = rights
                this.selectLeftlists.forEach(function (eleL, indL) {
                    seRight.forEach(function (ele, ind) {
                        if (eleL.id === ele.id) {
                            self.selectLeftlists[indL].open = false
                        }
                    })
                })
            },
            // 添加选中商品
            lefthandleCheckedCitiesChange(index) {
                var self = this
                this.selectLeftlists[index].open = !this.selectLeftlists[index].open
                var rArrs = []
                this.selectLeftlists.forEach(function (ele, ind) {
                    if (ele.open == true) {
                        rArrs.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    }
                })
                var hash = {};
                rArrs = rArrs.reduce(function (item, next) {
                    hash[next.id] ? '' : hash[next.id] = true && item.push(next);
                    return item
                }, [])
                if (rArrs.length == this.selectLeftlists.length) {
                    self.checked = true
                } else {
                    self.checked = false
                }
            },
            commodityLeftClick() {
                var self = this
                var rArrs = []
                this.selectLeftlists.forEach(function (ele, ind) {
                    if (ele.open == true) {
                        self.selectRightlists.push({ name: ele.name, open: false, parentId: ele.parentId, type: ele.type, id: ele.id })
                    }
                })
                var hash = {};
                self.selectRightlists = self.selectRightlists.reduce(function (item, next) {
                    hash[next.id] ? '' : hash[next.id] = true && item.push(next);
                    return item
                }, [])
            },
            // 所有序号被选中时
            numChange(event) {
                if (event.target.checked) {
                    this.selectLeftlists.forEach(function (ele, ind) {
                        ele.open = true
                    })
                } else {
                    this.selectLeftlists.forEach(function (ele, ind) {
                        ele.open = false
                    })
                }
            },
            //选择成员弹出框
            selectMembers(e) {
                this.ModalsShow = true
            },
            //选择成员弹出框确认
            confirmClick() {
                this.ModalsShow = false
                var val = ''
                var self = this
                if (this.selectRightlists.length == 1) {
                    val = this.selectRightlists[0].name
                    self.uidsVal = this.selectRightlists[0].id
                } else {
                    this.selectRightlists.forEach(function (ele, ind) {
                        val += ele.name + ','
                        self.uidsVal += ele.id + ','
                    })
                    self.uidsVal = self.uidsVal.substr(0, self.uidsVal.length - 1)
                }
                this.selectMembersVal = val
            },
            // 选择成员弹出框取消
            cancelClick() {
                this.ModalsShow = false
                this.definiBox = false
            },
            // 保存
            addClick() {
                var val = ''
                var self = this
                this.shangLists.forEach(function (ele, ind) {
                    if (ele.open == true) {
                        val += ele.id + ','
                    }
                })
                this.xiaLists.forEach(function (ele, ind) {
                    if (ele.open == true) {
                        val += ele.id + ','
                    }
                })
                var appIdsVal = ''
                appIdsVal = val.substr(0, val.length - 1)
                var addOBj = {
                }
                if (this.fanweiLists[this.selDivIndex].num == 2) {
                    var depiIdStr = JSON.stringify(this.deptIds)
                    depiIdStr = depiIdStr.substr(1, depiIdStr.length - 2)
                    addOBj = {
                        oid: sessionStorage.getItem('orgId'),
                        uid: sessionStorage.getItem('userId'),
                        deptIds: depiIdStr,
                        uids: self.uidsVal,
                        appIds: appIdsVal,
                        scopeId: this.fanweiLists[this.selDivIndex].num
                    }
                } else {
                    addOBj = {
                        oid: sessionStorage.getItem('orgId'),
                        uid: sessionStorage.getItem('userId'),
                        deptIds: "",
                        uids: self.uidsVal,
                        appIds: appIdsVal,
                        scopeId: this.fanweiLists[this.selDivIndex].num
                    }
                }
                this.getadminsave(addOBj).then(data => {
                    // self.reldatas = data.data
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器没有启动!"
                    });
                });
            },
            // 全选权限
            jurisdiction(event) {
                if (event.target.checked) {
                    this.shangLists.forEach(function (ele, ind) {
                        ele.open = true
                    })
                    this.indexArr = this.xiaLists.length + this.shangLists.length
                } else {
                    this.shangLists.forEach(function (ele, ind) {
                        ele.open = false
                    })
                    this.indexArr = 0
                }
                if (event.target.checked) {
                    this.xiaLists.forEach(function (ele, ind) {
                        ele.open = true
                    })
                    this.indexArr = this.xiaLists.length + this.shangLists.length
                } else {
                    this.xiaLists.forEach(function (ele, ind) {
                        ele.open = false
                    })
                    this.indexArr = 0
                }
            },
            fanweiListsClick(index) {
                this.selDivIndex = index
                if (index == 2) {
                    this.specMem = true
                } else {
                    this.specMem = false
                }
            },
            //选择部门弹出框        
            selectSpecific: function (e) {
                e.srcElement.style.borderColor = '#E7744A'
                this.definiBox = true
            },
            //返回上级页面
            back: function () {
                var url = '/home/set/setchildManager'
                this.$router.push({
                    path: url
                })
            },
            ...mapActions(['getdeptstaff','getdeptgetchild','getOrgTreeList','getadminsave','getauthgetAllAuth'])
        }
    }

</script>
<style scoped>
    /*部门弹出*/
    
    .definiBoxCenter>div {
        width: 500px;
        height: 410px;
        overflow-x: hidden;
        overflow-y: scroll;
        border: 1px solid #fff;
        margin-top: 10px;
    }
    
    .definiBoxCenter {
        width: 100%;
        height: 410px;
        background-color: #f4f4f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #ccc;
    }
    
    .definiBoxTop {
        width: 100%;
        height: 66px;
        background-color: #fff;
        text-align: center;
        font-size: 16px;
        color: #303030;
        line-height: 66px;
    }
    
    .defini {
        width: 560px;
        height: 560px;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
        animation: definiBox 0.8s;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        border-radius: 4px;
    }
    
    @keyframes definiBox {
        from {
            transform: translateY(-200px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .definiBox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 9999;
    }
    /*成员弹出*/
    
    .centerCenter>div {
        width: 30px;
        height: 30px;
        background-color: #fff;
        color: #000;
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    
    .centerCenter {
        width: 50px;
        height: 100%;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .centerRightBotLiR {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 15px;
    }
    
    .centerRightBotLiL>div:nth-child(1) img {
        width: 100%;
        height: 100%;
    }
    
    .centerRightBotLiL>div:nth-child(1) {
        width: 17px;
        height: 17px;
        border-radius: 3px;
        border: 1px solid #ececec;
        margin-right: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerRightBotLiL {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerRightBot {
        height: 235px;
        margin-top: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    .centerRightBot ul li:hover {
        background-color: #f6f6f6;
    }
    
    .centerRightBot ul li:nth-child(1) {
        margin-top: 20px;
    }
    
    .centerRightBot ul li {
        display: flex;
        align-items: center;
        height: 27px;
        width: 100%;
        cursor: pointer;
        padding-left: 15px;
        justify-content: space-between;
    }
    
    .centerRightBot {
        height: 365px;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #fff;
    }
    
    .centerLeftBotFourLiR {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 15px;
        color: #E7744A;
    }
    
    .centerLeftBotFourLiL>div:nth-child(1) img {
        width: 100%;
        height: 100%;
    }
    
    .centerLeftBotFourLiL>div:nth-child(1) {
        width: 17px;
        height: 17px;
        border-radius: 3px;
        border: 1px solid #ececec;
        margin-right: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerLeftBotFourLiL {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerLeftBotFour {
        height: 235px;
        margin-top: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    .centerLeftBotFour ul li:hover {
        background-color: #f6f6f6;
    }
    
    .centerLeftBotFour ul li {
        display: flex;
        align-items: center;
        height: 27px;
        width: 100%;
        cursor: pointer;
        padding-left: 15px;
        justify-content: space-between;
    }
    
    .centerLeftBotThr {
        height: 25px;
        margin-top: 5px;
        display: flex;
        align-items: center;
    }
    
    .centerLeftBotThr>div:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-top: 5px;
    }
    
    .centerLeftBotThr>div:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }
    
    .centerLeftBotOne {
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerLeftBotOneL {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .centerLeftBotOneI input {
        height: 30px;
    }
    
    .centerLeftBotOneI {
        width: 330px;
        height: 32px;
        line-height: 32px;
        font-size: 15px;
        color: #000;
    }
    
    .centerLeftBotOne>div {
        width: 370px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid #d1c4b9;
        display: flex;
        align-items: center;
    }
    
    .centerLeftBotTwo ul li >div:nth-child(2) {
        color: #E7744A;
        margin-right: 5px;
        margin-left: 5px;
        cursor: pointer;
    }
    
    .centerLeftBotTwo ul li:nth-child(1) >div:nth-child(2) {
        margin-left: 0px;
    }
    
    .centerLeftBotTwo ul {
        margin-left: 15px;
    }
    
    .centerLeftBotTwo ul li {
        float: left;
        display: flex;
    }
    
    .centerLeftBotTwo {
        min-height: 20px;
    }
    
    .centerLeftBot>div {
        width: 100%;
    }
    
    .centerLeftBot {
        height: 365px;
        border-radius: 5px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #fff;
    }
    
    .centerLeftTop,
    .centerRightTop {
        height: 45px;
        background-color: #f4f4f5;
        line-height: 55px;
        font-size: 16px;
        color: #000;
        padding-left: 5px;
    }
    
    .centerLeft {
        width: 400px;
        height: 410px;
        margin-left: 30px;
    }
    
    .centerRight {
        width: 400px;
        height: 410px;
        margin-left: 20px;
    }
    
    .ModalsmemTop {
        width: 100%;
        height: 66px;
        background-color: #fff;
        text-align: center;
        font-size: 16px;
        color: #303030;
        line-height: 66px;
    }
    
    .ModalsmemCenter {
        width: 100%;
        height: 410px;
        background-color: #f4f4f5;
        display: flex;
    }
    
    .ModalsmemBot {
        width: 100%;
        height: 85px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f4f4f5;
    }
    
    .ModalsmemBot>div {
        width: 80px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .ModalsmemBot>div:nth-child(1) {
        background-color: #E7744A;
        margin-right: 22px;
    }
    
    .ModalsmemBot>div:nth-child(2) {
        background-color: #aeaeae;
        margin-left: 22px;
    }
    
    .Modalsmem {
        width: 960px;
        height: 560px;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
        animation: madalsBox 0.8s;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        border-radius: 4px;
    }
    
    @keyframes madalsBox {
        from {
            transform: translateY(-200px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .ModalsmemBox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 9999;
    }
    /*成员弹出*/
    
    .set {
        position: relative;
    }
    
    .addChildTop {
        width: calc(100%-88px);
        height: auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 44px;
        margin-right: 44px;
        padding-top: 20px;
        padding-bottom: 12px;
        color: #303030;
        font-size: 14px;
    }
    
    .addChildTop img {
        margin-right: 8px;
    }
    
    .addChildBot {
        width: calc(100%-88px);
        height: auto;
        margin-left: 44px;
        margin-right: 44px;
        margin-top: 20px;
    }
    
    .member {
        width: 100%;
        height: auto;
        padding-left: 54px;
    }
    
    .member input {
        width: 320px;
        height: 30px;
        margin-left: 12px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 5px;
    }
    
    .chainCommand {
        width: 100%;
        height: auto;
        margin-left: 27px;
        margin-top: 20px;
    }
    
    .branch {
        margin-left: 85px;
        margin-top: -20px;
        min-height: 80px;
    }
    
    .branchspecMem {
        width: 100%;
        /*height: 30px;*/
        margin-top: 10px;
    }
    
    .branchDiv {
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center;
    }
    
    .branchDiv>div:nth-child(1)>div {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #ccc;
    }
    
    .branchDiv>div:nth-child(1) {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .branchDiv>div:nth-child(2) {
        margin-left: 10px;
    }
    
    #Specific {
        width: 320px;
        height: 30px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 5px;
    }
    
    .privileges {
        width: 100%;
        height: auto;
        margin-left: 29px;
        margin-top: 24px;
    }
    
    #bracket {
        margin-left: 8px;
        color: #8F8E94;
        font-size: 14px;
    }
    
    #allJurisdiction {
        float: right;
        margin-right: 118px;
        color: #E7744A;
        font-size: 14px;
    }
    
    .BasicPermissions {
        width: 75%;
        height: auto;
        margin-left: 108px;
        margin-top: 16px;
    }
    
    .BasicPermissionsLi {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #303030;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    
    .BasicPermissionsLi>div:nth-child(2) {
        display: flex;
        align-items: center;
    }
    
    .BasicPermissionsLi>div:nth-child(2)>div:nth-child(1) {
        width: 17px;
        height: 17px;
        border-radius: 3px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .BasicPermissionsLi>div:nth-child(2)>div:nth-child(1) img {
        width: 100%;
        height: 100%;
    }
    
    .BasicPermissionsLi>div:nth-child(2)>div:nth-child(2) {
        margin-left: 10px;
    }
    
    .BasicPermissions ul li div {
        display: inline-block;
    }
    
    #first {
        width: auto;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
    
    .ato {
        width: auto;
        height: 40px;
        line-height: 40px;
    }
    
    .allAA {
        width: auto;
        height: 40px;
        line-height: 40px;
        float: right;
    }
    
    .save {
        width: 100px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background-color: #E7744A;
        border-radius: 4px;
        margin: 30px auto;
    }
    
    .save a {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #FFFFFF;
        font-size: 16px;
    }
    
    .radio_inner {
        margin-top: 1px;
        margin-left: -20px;
        float: left;
        width: 14px;
        height: 14px;
        background: url('/static/img/Slice.png') no-repeat -118px -113px;
    }
    
    label.checked .radio_inner {
        background-position: -98px -113px;
    }
    
    .radio_origins {
        opacity: 0;
        z-index: -1;
        position: absolute;
    }
</style>